<template>
  
  <div>

     <div style="display: flex;flex-direction:row; margin: 0.5rem;padding: 0.2rem; border:0.05rem  gray solid; border-radius: 0.5rem" >
 
	    <img src="../../../../static/img/search.png" style="width: 2rem; height: 2rem">
	    <p style="margin: 0.3rem">搜索车辆品牌</p>
	  
	  </div>

	  <div v-for="(value,index) in car">
	   	    <div class="zimu">{{value['zimu']}}</div>

	   	    <div class="pinpai" v-for="obj in value['value']" >

		   	    <div style="display: flex;flex-direction: row; padding: 0.3rem" >
		   	    	 <img style="width: 2.5rem;height: 2.5rem;border-radius: 1.25rem" src="../../../../static/img/head.jpeg">
		   	          <p style="margin-top: 0.5rem; margin-left: 0.5rem; font-size: 1.1rem "> {{obj}}</p>
		   	    </div>
	   	   
	   	    </div>
	  </div>
  	
  </div>

</template>

<script>

  import axios from 'axios';
  import global from '../../../utils/global'
  import store from '../../../utils/store'
  export default {
    name: 'Card',
    data () {
      return {

      	car:[
      	  {'zimu':'A','value':['大众','丰田','凯迪拉克','别克']},
      	  {'zimu':'B','value':['大众','丰田','凯迪拉克','别克']},
      	  {'zimu':'C','value':['大众','丰田','凯迪拉克','别克']},
      	  {'zimu':'D','value':['大众','丰田','凯迪拉克','别克']},
      	  {'zimu':'F','value':['大众','丰田','凯迪拉克','别克']}
      	]
       
      }
    },
    mounted(){
    
    },
    methods: {
     
    },
  }
</script>
  
<style scoped>

  .zimu{
  	 background-color: #c1c1c1;
  	 text-align: left;
  	 padding: 0.3rem 0.5rem;
  }
  .pinpai{
  	 text-align: left;
  
  	 box-sizing: border-box;

  }
 
</style>
